<template>
    <ui-main title="图片阅览">
        <el-upload action="https://www.wangdahu.net/api/index.php?g=asset&m=asset&a=plupload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <!-- 这玩意集成了el-dialog来显示大图,扩展了一些图片查看时的操作 -->
        <ui-img-view :src="dialogImageUrl" :visible.sync="dialogVisible"></ui-img-view>
        <ui-load-md file="img-view.md"></ui-load-md>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                dialogImageUrl:'',
                dialogVisible:false
            };
        },
        methods:{
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
        }
    }
</script>
